<template>
  <view class="loginview">
    <view class="login">
      <image class="img1" src="../../static/logo1.png" mode=""></image>
    </view>
    <view class="title">欢迎登录云上农夫</view>
    <view class="inputbox">
      <view class="input_item">
        <input
          class="uni-input"
          placeholder="输入手机号"
          :value="phoneValue"
          @input="pnoneInput"
        />
        <text class="uni-icon" v-if="showPhoneIcon" @click="pnoneIcon"
          ><img class="quxiao" src="../../static/quxiao1.png"
        /></text>
      </view>
      <view class="input_item">
        <input
          class="uni-input"
          placeholder="输入验证码"
          :value="codeValue"
          @input="codeInput"
        />
        <text class="uni-icon" v-if="showCodeIcon" @click="codeIcon"
          ><img class="quxiao" src="../../static/quxiao1.png"
        /></text>
      </view>
      <view class="remind"> 未注册手机号验证后自动创建云上农夫账号 </view>
      <view class="radio">
        <label>
          <radio
            style="transform: scale(0.7)"
            color="#eea427"
            value="r1"
            :checked="checked"
            @click="checkedclick"
            class="radio1"
          />
          我已阅读并同意<a href="#/pages/my/clauseagreement"
            >《云上农夫用户协议》</a
          >、<a href="#/pages/my/privacypolicy">《隐私政策》</a
          >，并授权云上农夫使用该云上农夫账号信息（如昵称、头像、收货地址）进行统一管理。</label
        >
      </view>
      <view class="wrap">
        <view class=""> 获取验证码 </view>
      </view>
    </view>
    <view class="footer">
      <view class="footer_tit">使用微信一键注册登录</view>
      <view class="wechat">
        <img
          class="img"
          src="../../static/wechat.png"
          alt=""
          @click="weixlogin"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPhoneIcon: false,
      phoneValue: "",
      codeValue: "",
      showCodeIcon: false,
      checked: false,
    };
  },
  methods: {
    weixlogin() {
      uni.navigateTo({
        url: "/packageB/login/wechat",
      });
    },
    checkedclick() {
      this.checked = !this.checked;
      console.log(this.checked);
    },
    pnoneInput: function (event) {
      this.phoneValue = event.detail.value;
      if (event.detail.value.length > 0) {
        this.showPhoneIcon = true;
      } else {
        this.showPhoneIcon = false;
      }
    },
    pnoneIcon: function () {
      this.phoneValue = "";
      this.showPhoneIcon = false;
    },
    codeInput: function (event) {
      this.codeValue = event.detail.value;
      if (event.detail.value.length > 0) {
        this.showCodeIcon = true;
      } else {
        this.showCodeIcon = false;
      }
    },
    codeIcon: function () {
      this.codeValue = "";
      this.showCodeIcon = false;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.loginview {
  font-family: "Poppins";
  width: 100%;
  height: 100vh;
}

.login {
  width: 100%;
  height: 300rpx;
  padding-top: 70rpx;
  text-align: center;

  .img1 {
    width: 200rpx;
    height: 200rpx;
  }
}

.title {
  padding: 0rpx 50rpx;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 20rpx;
}

.inputbox {
  .input_item {
    margin: 0 auto 30rpx;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    width: 75%;
    height: 100rpx;
    border-radius: 30px;
    background: #f6f6f7;

    input {
      width: 90%;
      font-size: 30rpx;
    }
  }

  .remind {
    text-align: center;
    font-size: 28rpx;
    color: #8b8b8d;
    margin-bottom: 20rpx;
  }

  .radio {
    font-size: 20rpx;
    color: #abb1c0;
    padding: 0rpx 70rpx;
    line-height: 30rpx;
    margin-bottom: 30rpx;

    a {
      color: #0a4ef9;
    }
  }
}

.quxiao {
  width: 35rpx;
  height: 35rpx;
}

.wrap {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 50rpx;
  background: #eea427;
  color: #fff;
  margin: 0 auto;
  width: 75%;
  text-align: center;
}

.footer {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 80rpx;
  transform: translate(-50%);
  color: #61707f;
  font-size: 30rpx;

  .footer_tit {
    margin-bottom: 20rpx;
  }

  .wechat {
    text-align: center;

    .img {
      margin: 0 auto;
      width: 120rpx;
      height: 80rpx;
    }
  }
}
</style>